<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <style>
    body {
      background-color: #76838f;
      word-wrap: break-word;
      overflow-x: hidden;
    }
    .el-header .el-menu-item a{
      font-size: 15px;
      text-decoration: none;
      color: white;
    }
    .el-menu.el-menu--horizontal{
      border: 0;/*去掉导航菜单 自带的边框*/
    }
    .el-header img {
      position: relative;
    }
    #el-main-div1{
      font-size: 15px;
      color:#76838f;
      margin: 25px 0 0 250px;
    }
    #el-main-src1{
      margin: 10px 0 0 350px;
    }
    a{
      text-decoration: none;
      color: #000;
      text-align: center;
    }
    li{
      list-style: none;
      margin-right: 40px;
      font-size: 14px;
    }




  </style>
</head>
<body>
<div id="app">
  <el-header height="60px" style="background-color: #545c64">
    <div style="width: 1200px;margin: 0 auto">
      <img src="https://www.dabeiphoto.com.cn/upload/202107/1625185166.png" style="vertical-align: middle" width="150" height="60">
      <span style="float:right;margin-right: 10px;">
        <el-menu mode="horizontal" style="background-color: #545c64" >
          <el-menu-item index="1"><a href="">网站首页</a></el-menu-item>
          <el-menu-item index="2"><a href="">关于我们</a></el-menu-item>
          <el-menu-item index="3"><a href="">拍摄价格</a></el-menu-item>
          <el-menu-item index="4"><a href="">作品展示</a></el-menu-item>
          <el-menu-item index="5"><a href="">联系我们</a></el-menu-item>
        </el-menu>
      </span>
    </div>
  </el-header>
  <el-main style="width: 100%">
    <el-card style="background-color: #e8e8e8">
      <div>
        <el-carousel height="300px">
          <el-carousel-item><img src="https://www.dabeiphoto.com.cn/upload/201901/1547538851.jpg" width="100%" height="100%" ></el-carousel-item>
        </el-carousel>
      </div>
      <el-card style="margin-bottom: 30px">
        <div id="el-main-div1">你的位置》 <i class="el-icon-s-home"></i>网站首页》 拍摄价格》 儿童摄影<el-divider></el-divider></div>
        <div>
          <el-row gutter="30px" id="el-main-el-row1">
            <el-col span="12">                          <!--第一张图片-->
              <img id="el-main-src1" src="https://www.dabeiphoto.com.cn/upload/thumb_src/335_470/1653987718.jpg">
            </el-col>
            <el-col span="12">
              <p style="font-size: 25px;margin-bottom: 0px" >儿童黑白4寸剪裁大头照</p>
              <el-col span="8">
                <p style="font-size: 14px;">规格： 4寸/p>
                <p style="font-size: 14px;">价格：120</p>
                <p style="font-size: 14px;margin-bottom: 30px">加一文件价格：48</p>
                <p style="font-size: 14px;">是否预约： 不需要预约</p>
              </el-col>
              <el-col span="16">
                <p style="font-size: 14px;">每份张数： 2</p>
                <p style="font-size: 14px;">加洗一张价格：20</p>
                <p style="font-size: 14px;">拍摄门店：所有门店</p>
              </el-col>
            </el-col>
          </el-row>
        </div>
      </el-card>
      <div>
        <el-row gutter="20" align="center">
          <el-col span="4" style="margin-left: 200px">
            <el-card style="text-align: center;">
              <ul>
                <li><a href="" ><span style="color: #1baadb;font-size: 24px;">拍摄价格</span></a></li>
                <li><hr><a href="" title="childPrice"><span>儿童摄影</span></a><hr></li>
                <li><a href="" title="familyPrice"><span>家庭合影</span></a></li>
                <li><hr><a href="" title="artPrice"><span>艺术摄影</span></a><hr></li>
                <li><a href="" title="xizhuangPrice"><span>戏装摄影</span></a></li>
                <li><hr><a href="" title="idPrice"><span>证件摄影</span></a><hr></li>
                <li><a href="" title="classicsPrice"><span>经典摄影</span></a></li>
                <li><hr><a href="" title="marryPrice"><span>婚纱摄影</span></a><hr></li>
                <li><a href="" title="teamPrice"><span>团队摄影</span></a> <hr></li>
              </ul>
            </el-card>
          </el-col>
          <el-col span="14">
            <el-card style="height: 393px;"><!--根据页面改长短-->
              <p style="margin-left: 20px">详情信息:</p>
              <el-divider></el-divider>
              </el-input>
              <el-divider></el-divider>
              <div style="margin: 20px 0;">
                <p style="text-align: center">当前还没有人发表过评论......</p>
              </div>
              <el-input
                      type="textarea"
                      placeholder="说点什么吧...."
                      v-model="textarea"
                      maxlength="50"
                      show-word-limit
                      style="height: 40px;
                      margin-bottom: 15px">
              </el-input>
              <el-button style="float:right;">发表</el-button>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </el-main>
  <el-footer>
    <div style="background-color: #545c64;text-align: center;
             color: white;padding: 50px 0">
      <p>大北照相馆官方网站，为您提供照相前指导，普及照相知识，提供优质网络服务！</p>
      <p>北京大北照相有限责任公司 京ICP备15047318号-1 </p>
    </div>
  </el-footer>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function() {
      return {
        tableData: [{
          sets: 'A套',
          price: '500元',
          content: '单人拍摄7寸两张（皮册装裱）'
        }, {
          sets: 'B套',
          price: '345元',
          content: '单人拍摄8寸镜框一幅（普通镜框装裱）'
        }, {
          sets: 'C套',
          price: '415元',
          content: '双人拍摄8寸镜框一幅（普通镜框装裱）'
        }, {
          sets: 'D套',
          price: '515元',
          content: '三人拍摄8寸镜框一幅（普通镜框装裱）'
        }],
        text: '',
        textarea: ''
      }
    },
    methods:{

    }
  })
</script>
</html>